<template>
	<view class="flex flex-direction pageview">
		<zx-nav title="地址管理" bg="#fff" fixedTop></zx-nav>
		<view class="list flex-sub">
			<mescroll-uni bottom="140" ref="mescrollRef" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false">
				<address-item v-for="(item, index) in addrlist" :key="index" :info="item" @upload="uploadlist" :settype="type"></address-item>
			</mescroll-uni>
		</view>
		<view class="operate-btn flex align-center">
			<view class="wechat-btn flex align-center justify-center" @tap="wxaddr">
				<image src="/static/wechat-white.png" mode="widthFix"></image>
				从微信导入
			</view>
			<navigator url="/pages/address/add" class="addbtn flex align-center justify-center">
				<image src="/static/add.png" mode="widthFix"></image>
				新增收货地址
			</navigator>
		</view>
	</view>
</template>

<script>
import addressItem from '@/components/addressItem.vue';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
	data() {
		return {
			addrlist: [],
			upOption: {
				empty: {
					use: true, // 是否显示空布局
					icon: '/static/mescroll/noAddr.png',
					tip: '暂无收货地址～' // 空提示
				}
			},
			type: 0
		};
	},
	mixins: [MescrollMixin],
	components: {
		addressItem
	},
	onLoad(option) {
		this.type = option.type || 0;
	},
	onShow() {
		this.mescroll && this.mescroll.resetUpScroll();
	},
	methods: {
		/*上拉加载的回调*/
		upCallback(mescroll) {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			this.getaddrlist({
				page: pageNum,
				limit: pageSize
			});
		},
		getaddrlist(param) {
			let $me = this;
			this.$postAction(this.$api.getaddrList, param)
				.then(da => {
					if (da.data && da.data.length > 0) {
						let curPageData = da.data;
						$me.mescroll.endBySize(curPageData.length, da.count);
						if ($me.mescroll.num == 1) $me.addrlist = []; //如果是第一页需手动制空列表
						$me.addrlist = $me.addrlist.concat(curPageData); //追加新数据
					} else {
						if (this.mescroll.num == 1) this.addrlist = [];
						this.mescroll.endSuccess(da.count || 0, false);
					}
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		},
		uploadlist() {
			this.mescroll && this.mescroll.resetUpScroll();
		},
		wxaddr() {
			uni.chooseAddress({
				success: res => {
					this.saveInfo({
						contact_phone: res.telNumber,
						contact_name: res.userName,
						province: res.provinceName,
						city: res.cityName,
						district: res.countyName,
						address: res.detailInfo,
						is_default: 0
					});
				},
				fail: res => {
					console.log('上击败', res);
				}
			});
		},
		saveInfo(param) {
			let that = this;
			this.$postAction(this.$api.addAddr, param).then(da => {
				if (da.code == 0) {
					uni.showToast({
						title: '新增地址成功',
						icon: 'success'
					});
					this.uploadlist();
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.pageview {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}
.list {
	overflow: auto;
	margin-top: 30upx;
}
.operate-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20upx 28upx;
	padding-bottom: calc(28upx + env(safe-area-inset-bottom) / 2);
}
.wechat-btn,
.addbtn {
	width: 340upx;
	height: 82upx;
	border-radius: 41upx;
	font-weight: 500;
	color: #fff;
	font-size: 28upx;
	image {
		width: 24upx;
		height: 24upx;
		display: block;
		margin-right: 12upx;
	}
}
.wechat-btn {
	background: linear-gradient(90deg, #1ae81a 0%, #00c800 100%);
	box-shadow: 0px 12upx 24upx -9upx #7af57a;
	image {
		width: 32upx;
		height: 27upx;
	}
}
.addbtn {
	margin-left: 14upx;
	background: linear-gradient(90deg, #ff8173 0%, #ff3543 100%);
	box-shadow: 0px 12upx 24upx -9upx #ffbec2;
}
</style>
